<template>
	<view class="container">
		<scroll-view scroll-y class="history-list" @scrolltolower="loadMore">
			<view v-for="({ id, station }, index) in pagedRecords" :key="id" class="history-item"
				@click="handleItemClick(station)">
				<SafeImage :src="station.favicon" class="cover" mode="aspectFill" />
				<view class="info">
					<text class="name">{{ station.name }}</text>
				</view>
				<view @click.stop="toggleFavorite(station)">
					<uni-icons :type="isFavorite(station) ? 'heart-filled' : '#FF0266'"
						:color="isFavorite(station) ? 'red' : 'gray'" size="48rpx" />
				</view>
				<view @click.stop="handleItemDelete(id)">
					<uni-icons type="closeempty" color="gray" size="48rpx" />
				</view>
			</view>
			<view v-if="!pagedRecords.length" class="empty">暂无播放记录</view>
			<view v-else-if="isLoading" class="loading-tip">加载中...</view>
			<view v-else-if="noMore" class="no-more">没有更多内容</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import SafeImage from '@/components/SafeImage/SafeImage.vue';
import { usePlayerStore } from '@/stores/usePlayerStore';
import type { Station } from '@/common/types/interface';

const playerStore = usePlayerStore();
const pageSize = 15;
const currentPage = ref(1);
const isLoading = ref(false);

const pagedRecords = computed(() =>
	playerStore.histories.slice(0, currentPage.value * pageSize)
);

const noMore = computed(() =>
	pagedRecords.value.length >= playerStore.histories.length
);

const isFavorite = (record: Station) =>
	playerStore.favorites.some(fav => fav.stationuuid === record.stationuuid);

const handleItemClick = (record: Station) => {
	console.log('播放事件')
	playerStore.switchStation(record);
};

function toggleFavorite(record: Station) {
	console.log('收藏事件')
	playerStore.toggleFavorite(record);
}

const handleItemDelete = (id: number) => {
	console.log('删除事件')
	playerStore.removeHistory(id);
}

const loadMore = () => {
	if (noMore.value || isLoading.value) return;
	isLoading.value = true;
	setTimeout(() => {
		currentPage.value++;
		isLoading.value = false;
	}, 400); // 模拟加载延迟，可替换为真实请求
};
</script>

<style scoped>
page {
	height: 100%;
}

.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
	padding: 24rpx;
	color: white;
}

.history-list {
	height: 100%;
}

.history-item {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.cover {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
}

.info {
	margin-left: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

.name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60vw;
	/* 调小宽度 */
	font-size: 28rpx;
	/* 可选：调小字体 */
	white-space: normal;
	/* 允许换行 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 最多显示2行 */
	-webkit-box-orient: vertical;
}

.loading-tip,
.no-more,
.empty {
	text-align: center;
	color: #999;
	margin: 24rpx 0;
}
</style>